<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.0.min.js"></script>
    <style>
        body {
            background: black;
        }

        #leadingRole {
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 30px;
        }

        #prompt {
            color: blanchedalmond;
            border-radius: 5px;
            border: 1px dashed blanchedalmond;
            width: 210px;
            list-style: none;
            float: right;
        }

        #prompt>li {
            margin-left: -40px;
            height: 25px;
            line-height: 25px;
            padding-left: 50px;
        }
        /* css3点击及鼠标悬停分页样式 */
        #prompt>li:hover:not(.active) {background-color: red;}
        #prompt>li:first-child{
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        #prompt>li:last-child{
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

    </style>
</head>

<body>
    <img src="../images/aim.png" alt="" id="leadingRole">
    <ul id="prompt">
        <li>向左：A键与左键</li>
        <li>向右：D键与右键</li>
        <li>向上：W键与上键</li>
        <li>向下：S键与下键</li>
    </ul>
    </div>
    <script>
        var verticalSpeed = 30;
        var verticalDistance = 0;
        var horizontalSpeed = 30;
        var horizontalDistance = 0;
        var winHeight = document.documentElement.clientHeight;
        var winWidth = document.documentElement.clientWidth;
        window.onkeydown = function (event) {
            if (event.keyCode == 37 || event.keyCode == 65) {
                horizontalDistance -= horizontalSpeed;
                if (horizontalDistance <= 0) horizontalDistance = 0;
            }
            if (event.keyCode == 39 || event.keyCode == 68) {
                horizontalDistance += horizontalSpeed;
                if (horizontalDistance + leadingRole.width >= winWidth) horizontalDistance = winWidth - leadingRole.width;
            }
            if (event.keyCode == 38 || event.keyCode == 87) {
                verticalDistance -= verticalSpeed;
                if (verticalDistance <= 0) verticalDistance = 0;
            }
            if (event.keyCode == 40 || event.keyCode == 83) {
                verticalDistance += verticalSpeed;
                if (verticalDistance + leadingRole.height >= winHeight) verticalDistance = winHeight - leadingRole.height;
            }
            $("#leadingRole").css({ "top": verticalDistance + 'px', "left": horizontalDistance + 'px' });
        }
    </script>
</body>

</html>